<template>
    <WhiteContainer>
    <table class="table table-dark table-striped" style="text-align: center;">
        <thead>
            <tr>
                <td>玩家</td>
                <td>天梯分</td>
            </tr>                               
        </thead>
        <tbody>
            <tr v-for="user in users" :key="user.id"> 
                <td>
                    <img :src="user.photo" alt="" class="record-user-photo">
                    &nbsp;
                    <span class="record-user-username"> {{ user.username }}</span>
                </td>

                <td>{{ user.rating }}</td>
            </tr>
        </tbody> 
    </table>

        <nav aria-label="Page navigation example">
        <ul class="pagination" style="float: right;">
            <li class="page-item">
                <a class="page-link" @click="click_page(-2)" href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>


            <li :class="'page-item ' + page.is_active" v-for="page in pages" :key="page.number" @click="click_page(page.number)">
                <a class="page-link" href="#">{{ page.number }}</a>
            </li>
            
            
            <li class="page-item">
            <a class="page-link " @click="click_page(-1)"  href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
            </li>
        </ul>
        </nav>
    </WhiteContainer>
</template>

<script>
import WhiteContainer from '../../components/WhiteContainer.vue'
import { useStore } from 'vuex';
import $ from 'jquery';
import { ref } from 'vue';


export default { 
    components: { WhiteContainer },
    setup() {
        const store = useStore();
        let users = ref([]);
        let total_users = 0;
        let current_page = 1;
        let pages = ref([]);

        const click_page = page => {
            if (page === -2) {
                page = current_page - 1;
            } else if (page === -1) {
                page = current_page + 1;
            }

            let max_pages = parseInt(Math.ceil(total_users / 10));
            if (page >= 1 && page <= max_pages) {
                pull_page(page);
            }
        }
 
        const update_pages = () => {
            let max_pages = parseInt(Math.ceil(total_users / 10));
            let new_pages = [];
            for(let i = current_page - 2; i <= current_page + 2; i++) {
                if (i >= 1 && i <= max_pages) {
                    new_pages.push({
                        number: i,
                        is_active: i === current_page ? "active" : ""
                    });
                }
            }

            pages.value = new_pages;
        }
        const pull_page = page => {
            current_page = page;
            $.ajax({
                url: "https://app3217.acapp.acwing.com.cn/api/ranklist/getList/",
                type: "get",
                data: {
                    page,
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(resp) {
                    users.value = resp.users;
                    total_users = resp.users_count;
                    //console.log(resp.records);
                    update_pages();
                },
                error(resp) {
                    console.log(resp);
                }
            })
        }
        pull_page(current_page);


        return {
            users,
            pages, 
            click_page,
        }
    }
}
</script>

<style scoped>
img.record-user-photo {
    width: 5vh;
    border-radius: 50%;
}

</style>